<template>
  <a-modal v-model:visible="isFileUp" title="标准导入" cancel-text="取消" ok-text="确定" @ok="handleOk" @Cancel="handleCancel()">
    <a-form name="basic" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" autocomplete="off">
      <a-form-item name="standardName" :rules="[{ required: true, message: '上传文件不能为空!', trigger: ['blur', 'change'] }]"
        >选择文件:
        <a-upload v-model:file-list="fileList" name="file" :action="props.action" @change="handleChange1">
          <a-button type=""
            >本地文件
            <upload-outlined></upload-outlined>
          </a-button>
        </a-upload>
        <br />
        <p>提示：请下载最新模板，按照模板准备导入文件后导入标准文件，导入后系统将满足正确条件的文件导入到标准目录，错误的标准文件将被过滤。</p>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import type { Ref } from 'vue';
  import { message, UploadChangeParam } from 'ant-design-vue';
  import { UploadOutlined } from '@ant-design/icons-vue';
  const props = defineProps({
    isFileUp: {
      type: Boolean,
      default: false,
    },
    action: {
      type: String,
    },
  });
  const isFileUp = ref<boolean>(false);
  watch(
    () => props.isFileUp,
    nvalue => {
      isFileUp.value = nvalue;
      if (nvalue == false) {
        //如果是关闭弹窗，则不做事情
        return;
      }
    },
  );
  const emit = defineEmits(['closeFileUp']);
  // const confirmLoading = ref<boolean>(false);
  const handleOk = (e: MouseEvent) => {
    // confirmLoading.value = false;
    emit('closeFileUp', 'false');
  };
  const handleChange1 = (info: UploadChangeParam) => {
    if (info.file.status === 'done') {
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  };
  //调用弹窗的关闭按钮方法
  const handleCancel = () => {
    emit('closeFileUp', 'false');
  };
  const fileList = ref([]);
  //导入导出结束
</script>
